---

Alan Hope

Home Blog Dashboard

---

Music

Many Youtubes Albums My Stuff Guitar Blackstar HT1R

---

Photography

Gallery Equipment Software

---

Neural Networks & AI

AI Apps Neural Networks XOR Dental

---

Programming

Multiplayer Game skeleton CVS Testing JS Constructors Fire Analogue Clock Background Sim Dev Simulator Progress bar Web Worker Sim Worker Drag n Drop

---

Javascript Libraries

Vis js Vis family tree Create js PixiJs Stars PixiJs Random Walk Mermaid XeoGL ThreeJS ThreeJS ClayGL Babylon.js

---

Web design & Coding

Coding, for me, involves a lot of development work which I prefer to do by working on demos each addressing one or two challenges. Here are some of the working demos.

3D array Conway's game of Life 3D sine wave HTML colours Google fonts Screensaver Konva.js Flowchart Variable fonts Newspaper style Fluid typography Bitter (Slab-serif) Public Sans Encode Sans Icons QR Code

---

Games

Stockfish Leela Chess Zero Chess Scrabble

---

JET5 Anaesthesia

Many of you know us from our years of JET5 Rota. We have now been shut out of that service, so have turned our hand to other things. Check out our website for some very cool apps, websites, and a real-time simulation.

Jet5

---

Family

Emily Genealogy Family tree Xmas Newsletter 30th Anniversary

---

Settings

theme theme

roboto flexroboto serifmulishinterarchivogeoramavartaheebopublic sansmanropecatamaranassistantdosisoswaldroboto slabbittermanualedominepiazzollafaustinaloranewsreaderalegreyagrenze gotischcinzelimbuetruculentayanone kaffeesatzsairainconsolataplayfair displaykreonpetronacabinencode sansexoralewayjostcommissionerdancing scripthahmletyrsarasasource sans 3besleymurechobodoni modaibarra real novanoto serif displaysource serif 4STIX two textinter tightliterataspline sans mono

---

Source Sans 3

---

Source Sans 3 (£12gIl&@%? fi fl)

Source Sans 3 (£12gIl&@%? fi fl)

Source Sans 3 (£12gIl&@%? fi fl)

Alan says, "Source Sans 3—good enough to be included on this page."

A real-time patho-physiological simulator with embedded ANNs (artificial neural networks). A work in progress.

This page (apart from the header and footer) is rendered using a single variable typeface - "Source Sans 3". Source Sans 3, as with all the fonts implemented on this page, is impressively clear at small sizes and keeps an attractive shape with decent kerning throughout the weight-range. Google will serve an equivalent range of non-variable fonts to those browsers that do not support variable-fonts. Source Sans 3 should be suitable for information-dense web pages containing multiple areas of formatted text: paragraphs, tables, etc. This paragraph is normal width at a weight of 400. This sentence has class "bold" causing a relative increase in weight. A full, print-friendly, font.
Numerals: vertical alignment & character spacing / kerning 1234567890
£1,111.11 |
£8,888.88 |

Some tiny text light LIGHT @ 300. Some small text MEDIUM-LIGHT @ 300. Some big text MEDIUM-LIGHT @ 300. Some big text MEDIUM@ 400. Some heavy text HEAVY @ 700. The heaviest weight available: HEAVIEST. JET5 And in italics. JET5

---

Varying width (---)

---

OK, here's some experimentation with CSS for tables and interface elements. All light-on-dark for an extra challenge in legibility! (weight 300)

I guess the basic question is: can you do a professional-looking website using only a single variable font? (weight 600)

Top Left Cell 1	Cell 2: 2px padding, tiny font & whole cell is clickable!
Cell 3. Let's pad this one to 8px, add a rounded border and some text—and see how well it works (all cell clickable).	Bottom Right Class = small (font size) Button 1 Button 2

1. One
2. Two

• One
• Two

And the answer is definitely! And that website will be faster because of the reduced overall font-file size, bandwidth, and memory requirements.